<style scoped lang="less">
	.warp{
		.kefu-title{
			width: 100%;
			height: 2.4rem;
			padding: 0.37rem 0.45rem;
			background-color: #fff;
			margin-bottom: 0.37rem;
			border-bottom: 0.01rem solid #eee;			
			h3{
				color: #666;
				font-size: 0.48rem;
				margin-bottom: 0.27rem;
				font-weight: normal;
			}
			p{
				font-size: 0.37rem;
				color:#999;
				a{
					font-weight: bold;
					color:#4DB2EB;
				}
			}
		}
		.kefu-type{
			width: 100%;
			height: 1.07rem;
			line-height: 1.07rem;
			padding: 0 0.35rem;
			background-color: #fff;
			border-top: 0.01rem solid #eee;
			border-bottom: 0.01rem solid #eee;
			margin-bottom: 0.37rem;			
			span:nth-child(1){
				float: left;
			}
			select{
				border: 0;
				height: 1rem;
				float: right;
				-webkit-appearance:none;
				appearance:none;
				outline:none;
				-webkit-tap-highlight-color:rgba(0,0,0,0);
				background-color: #fff;
				margin-right: 0.1rem;
				color:#999;
			}
			span:nth-child(2){
				float: right;
			}
		}
		.kefu-edit{
			background-color: #fff;
			width: 100%;
			margin-bottom: 0.37rem;
			textarea{
				resize: none;
				width: 100%;
				height: 2.67rem;
				border: 0;
				padding: 0.35rem;
				
			}
			.upfile-group{
				padding: 0 0 0.35rem 0.35rem;
				.upimg-btn{
					width: 2.08rem;
					height: 2.08rem;
					float: left;
					margin-right: 0.27rem;
					background: url('../../images/addimg.png') no-repeat;
					background-size: 100% 100%;
				}
				.upfile-list{
					float: left;
					width: 2.08rem;
					height: 2.08rem;
					background-color: #eee;
					margin-right: 0.27rem;
					margin-bottom: 0.27rem;					
					position: relative;
					display: flex;
					justify-content: center;
					align-content: center;
					.show{
						max-width: 100%;
						max-height: 100%;
					}
					.del{
						position: absolute;
						top:-0.11rem;
						right:-0.11rem;
						width: 0.43rem;
						height: 0.43rem;
						background: url('../../images/deletephoto.png') no-repeat;
						background-size: 100% 100%;
					}
				}
			}
			
		}
		.user-mobile{
			width: 100%;
			height: 1.07rem;
			line-height: 1.07rem;
			margin-bottom: 0.37rem;			
			background-color: #fff;
			border: 0;
			border-top: 0.01rem solid #eee;
			border-bottom: 0.01rem solid #eee;
			padding: 0 0.35rem;
			-webkit-appearance:none;
				appearance:none;
				outline:none;
				-webkit-tap-highlight-color:rgba(0,0,0,0);
		}
		.bottom-box{
			width: 100%;
			height: 1.65rem;
			background-color: #fff;
			padding: 0.32rem 0.35rem 0 0.35rem;
			
			p{
				width: 9.31rem;
				height: 1.04rem;
				line-height: 1.04rem;
				font-size: 0.37rem;
				color:#fff;
				background: #FE9333;
				box-shadow: 4px 4px 4px 0 rgba(241,100,115,0.21);
				text-align: center;
				border-radius: 0.05rem;

			}
		}
	}

</style>
<template>	
	<div class="warp">
		<!---->
		<div class="kefu-title">
			<h3>客服电话</h3>
			<p>亲,您有任何疑问欢迎致电 : <a :href="'tel:'+kfphone" >{{kfphone}}</a></p>
		</div>
		<!---->
		<div class="kefu-type" v-show="feedtype">
			<span>反馈类型</span>
			<span>></span>			
			<select v-model="backtypechoose">
				<option value="" >请选择反馈类型</option>				
				<option :value="item.id" v-for="item in typelist">{{item.name}}</option>
			</select>
		</div>
		<!---->
		<div class="kefu-edit">
			<textarea placeholder="亲,您遇到什么系统问题,或能有什么功能建议吗?欢迎提给我们,谢谢!" v-model="lycontent"></textarea>
			<div class="upfile-group clearfix" >
				<!-- <Upload  
				multiple
				:on-success="handleSuccess" 
				:show-upload-list="false"
				:default-file-list="photolist"
				:action="hosturl+'/feedback/mobile/uploadPicture'" 
				:before-upload="handleBeforeUpload"
				name="picture">
					<div class="upimg-btn"></div>
				</Upload>    -->
				<v-upload
					style="float:left;"
					name
					ref="imgupload"
					:action="hosturl+'/feedback/mobile/uploadPicture'"
					:headers="tokendata"
					:queue = false
					@change="handleBeforeUpload"
					:accepts="['image/jpg','image/png','image/jpeg']"
					:multiple=true
					@success="handleSuccess"
					:auto=false
					name="picture">
					<div class="upimg-btn"></div>
				</v-upload> 
				<div class="upfile-list" v-for="(item,index) in photolist">
					<img :src="imgurl+'/static/images/temp/'+item " class="show"/>
					<div class="del" @click="delphoto(index)"></div>
				</div>

			</div>
		</div>
		<!---->
		<input type="text" placeholder="请输入姓名(可选填)" class="user-mobile" v-model="username"/>
		<input type="text" name="number" placeholder="输入您的手机号" class="user-mobile user-mobile1" v-model="phone" maxlength="11"/>
		<!---->
		<div class="bottom-box">
			<p @click="submitFk()">提交反馈</p>
		</div>
	</div>
</template>
<script>
    import { mapState } from 'vuex'
    import global from '../../config/global'
    import '../../js/flexible.debug.js'
    import '../../less/moblie.less'
    export default {
		data() {
			return {
				imgurl:global.imgurl,
				videourl:global.videourl,
				hosturl:global.host,
				feedtype:false,//反馈类型
				backtypechoose:"",//反馈类型选择
				phone:"",
				username:"",
				photolist:[],
				lycontent:"",
				typelist:[],
				kfphone:"",
			}
		},
		components: {
		},
		computed: {
		},
		created() {
			this.ajax();
		},
		watch: {
		},
        computed: mapState({ user: state => state.user }),
		methods:{
			ajax(){
				if(this.$route.query.feedbacktype == 3 || this.$route.query.feedbacktype == 4 || this.$route.query.feedbacktype == 5 || this.$route.query.feedbacktype == 6){
					this.feedtype = true;
					this.kfphone = '400-056-9906';
					this.$http.get(this.hosturl+"/unsecured/mobile/feedback/type/childType/getDataList?source="+this.$route.query.feedbacktype)
					.then((response) => { 
						if(response.body.status == 1){
							this.typelist = response.body.childTypeList
						}
					})
					.catch(function (response) {
					})
				}else{
					this.kfphone = this.$route.query.phoneNum;
				}
			},
			submitFk(){
				if(this.feedtype && this.backtypechoose === ""){
					//平台反馈
					this.$loading.showPop('请选择反馈类型');	
					setTimeout(() => {
						this.$loading.hidePop();								
					}, 1000);
					return;
				}
				if(this.lycontent == ""){
					this.$loading.showPop('请输入反馈内容');	
					setTimeout(() => {
						this.$loading.hidePop();								
					}, 1000);
					return;
				}
				if(!(/^1[3|4|5|7|8]\d{9}$/.test(this.phone))){
					this.$loading.showPop('请输入正确的手机号');	
					setTimeout(() => {
						this.$loading.hidePop();								
					}, 1000);
					return;
				}
				this.$http.post(this.hosturl+"/feedback/mobile/save",
				{"feedbackTypeId":this.$route.query.feedbacktypeId,"username":this.username,"connection":this.phone,"cmyId":this.$route.query.lyid,"content":this.lycontent,"fileNameList":this.photolist.join(","),"source":this.$route.query.feedbacktype,"childTypeId":this.backtypechoose})
				.then((response) => {
					if(response.body.status == 1){
						this.$loading.showPopTwo('反馈成功',require('../../images/phone-popIcon2.png'),response.body.message);	
						setTimeout(() => {
							this.$loading.hidePopTwo();								
						}, 2000);
						this.$router.push({ path: '/mobliefeedback',query:{"lyid":this.$route.query.lyid}});
					}else{
						this.$loading.showPopTwo('反馈失败',require('../../images/phone-popIcon3.png'),response.body.message);	
						setTimeout(() => {
							this.$loading.hidePopTwo();								
						}, 2000);
					}
				})
				.catch(function (response) {
				})
			},
			handleSuccess(res){//照片上传图片
				this.photolist.push.apply(this.photolist,JSON.parse(res).fileNameList); 
            },
			delphoto(index){
				this.photolist.splice(index, 1);
			},
			handleBeforeUpload(res){
				if(res.length + this.photolist.length > 10){
					this.$loading.showPopTwo('仅可上传10张照片',require('../../images/phone-popIcon.png'));	
					setTimeout(() => {
						this.$loading.hidePopTwo();								
					}, 2000);
					this.$refs.imgupload.safeFiles = [];					
				}else{
					this.$refs.imgupload.submit();	
					this.$refs.imgupload.safeFiles = [];
				}
			}
		}
    }
</script>